<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商品销量柱状图</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.4.2/echarts.min.js" integrity="sha512-VdqgeoWrVJcsDXFlQEKqE5MyhaIgB9yXUVaiUa8DR2J4Lr1uWcFm+ZH/YnzV5WqgKf4GPyHQ64vVLgzqGIchyw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<!--<div style="padding-left: 30px;padding-top: 10px">-->
<!--    <span>营业额：</span>-->
<!--    <span id="turnover">0</span>-->
<!--    <span>元</span>-->
<!--</div>-->
    <div id="main" style="width: 100%;height:1200px;" ></div>
</body>
<script>

    getGoodsTop()

    setInterval(function() {
        // update();
        // getGoodsTop();
    }, 3000);

    function getGoodsTop(){
        $.ajax({
            type: "GET",
            url: "goods/goodsSoldTop",
            success: function (res) {
                // 基于准备好的dom，初始化echarts实例
                var myChart = echarts.init(document.getElementById('main'));
                var Ydata = [];
                var Sdata = [];
                // 指定图表的配置项和数据
                option = {
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    xAxis: {
                        max: 'dataMax',
                        name:'商品销量',
                        nameTextStyle: {
                            color: "rgba(235, 20, 20, 1)"
                        },
                    },
                    yAxis: {
                        name:'商品名称',
                        type: 'category',
                        data: Ydata,
                        nameTextStyle: {
                            verticalAlign: "middle",
                            color: "rgba(235, 20, 20, 1)",
                            verticalAlign: "middle",
                        },
                        axisLabel:{
                            show:true,
                            formatter:function(value){
                                var texts=value;
                                if(texts.length>6){ // 具体多少字就看自己了
                                    texts=texts.substr(0,8)+'...';
                                }
                                return texts;
                            }
                        },
                        nameLocation: "start",
                        inverse: true,
                        animationDuration: 300,
                        animationDurationUpdate: 300,
                        // max: 20 // only the largest 3 bars will be displayed
                    },
                    series: [
                        {
                            realtimeSort: true,
                            name: '商品总销量排行榜',
                            type: 'bar',
                            data: Sdata,
                            label: {
                                show: true,
                                position: 'right',
                                valueAnimation: true
                            }
                        }
                    ],
                    legend: {
                        show: true
                    },
                    animationDuration: 3000,
                    animationDurationUpdate: 3000,
                    animationEasing: 'linear',
                    animationEasingUpdate: 'linear'
                };
                for (let i=0;i<res.data.length;i++){
                    var item = res.data[i];
                    Ydata.push(item.goodstitle);
                    Sdata.push(item.sold);
                }
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
            }
        });
    }


/*
    function update() {
        var data = option.series[0].data;
        $.ajax({
            type: "GET",
            url: "goods/goodsSoldTop",
            success: function (res) {
                for (let i=0;i<res.data.length;i++){
                    data[i]=res.data[i].sold
                }
                myChart.setOption(option);
            }})
        }
*/



</script>
</html>